<template>
    <div class="layoutView">
        <side-bar @currentPathEmit="currentPathHandler"></side-bar>
        <router-view class="routerView2"></router-view>
        <welcome-view v-if="currentPath === '/'"></welcome-view>
    </div>
</template>

<script>
import SideBar from "@/components/SideBar.vue";
import WelcomeView from "@/components/WelcomeView.vue";
import { instance } from '@/socketio';
export default {
    name: "LayoutView",
    components: {
        SideBar,
        WelcomeView
    },
    data(){
        return {
            currentPath: '',
        }
    },
    created(){
        console.log('layout_created');
        this.init();
        
    },
    methods: {
        currentPathHandler(path){
            this.currentPath = path;
        },
        init(){
            if(!this.$store.getters.token){
                this.$router.push('/login');
                return;
            }
            this.currentPath = this.$router.history.current.path;

            const token = this.$store.getters.token;
            if(instance.socket){
                if(!instance.socket.connected){
                    instance.connect(token); // 连接socketio
                }
            }else {
                instance.connect(token); // 连接socketio
            }
            // 监听连接错误
            instance.once('login', (obj) => {
                console.log('layout_login', obj);
            });
            instance.once('errorLogin', (obj) => {
                console.log('layout_errorLogin', obj);
                this.$store.dispatch('removeToken');
                this.$router.push('/login');
            });
        },       
    }
}
</script>

<style scoped>
.layoutView{
    height: 100%;
    display: flex;
}
.routerView2{
    flex: 1;
}
</style>